<template>
<div class="box_wrapper">
    <Header title="忘记密码" >
        <img class="left" @click="back" src="../assets/turn.png" alt="">
    </Header>
    <div class="forget">
        <div class="box_for">
            <img src="@/assets/phonesmall.png">
            <input type="text" v-model="total.phone" placeholder="请输入手机号码">
        </div>
         <div class="box_for">
            <img src="@/assets/ID.png">
            <input type="text" placeholder="请输入身份证" v-model="total.sfz">
        </div>
        <div class="box_for">
            <img src="@/assets/lock.png" alt="">
            <input :type="type_A" placeholder="请输入新密码" v-model="total.password">
            <img @click="change_A" :src="icon_gran">
        </div>
        <div class="box_for">
            <img src="@/assets/lock.png" alt="">
            <input :type="type_B" placeholder="请再次输入新密码" v-model="total.Rpassword">
            <img @click="change_B" :src="icon_eyes">
        </div>
    </div>
    <div class="btn" @click="again">重置密码</div>
</div>
</template>

<script>
import Header from './header'
import { Toast, Indicator } from "mint-ui";
import { resetPassword } from '../old_request'
export default {
    data(){
        return{
            total:{},
            type_A:'password',
            type_B:'password',
            icon_gran:require('../assets/icon_login_eyes.png'),
            icon_eyes:require('../assets/icon_login_eyes.png'),
            flag_A:true,
            flag_B:true

        }
    },
    components:{
        Header
    },
    methods:{
        back(){
            this.$router.back();                        //跳回前一页
        },
        change_A(){                                       //切换输入密码是否可见
            let that = this;
            if(that.flag_A){
                that.type_A = 'text';
                that.flag_A = !that.flag_A;
                that.icon_gran = require('../assets/icon_login_eyes2.png');
            }else{
                that.type_A = 'password';
                that.flag_A = !that.flag_A;
                that.icon_gran = require('../assets/icon_login_eyes.png');
            }
        },
        change_B(){                                              //切换再次输入密码是否可见
            let that = this;
            if(that.flag_B){
                that.type_B = 'text';
                that.flag_B = !that.flag_B;
                that.icon_eyes = require('../assets/icon_login_eyes2.png');
            }else{
                that.type_B = 'password';
                that.flag_B = !that.flag_B;
                that.icon_eyes = require('../assets/icon_login_eyes.png');
            }
        },
        again(){
           
            let that = this;
            let data = {
                "sign":that.$md5(`${that.wrapper.globalData()}mobile=${that.total.phone}timestamp=${that.wrapper.gettime()}`),
                "timestamp":that.wrapper.gettime(),
                "mobile":that.total.phone,
                "IDCard":that.total.sfz,
                "password":that.$md5(that.total.password)
            }
           
             Indicator.open({
                text:'正在注册'
            })

            resetPassword(data,that).then( (res) => {
                console.log(res)
                Indicator.close();
                if(res.code === 0){
                    Toast({
                        message: "重置成功",
                        iconClass: "iconfont icon-success_no_circle",
                        duration: 1500
                    });
                    setTimeout(function(){
                        that.$router.push('/');
                    },2000)
                }   
            })

        }
    }
}
</script>

<style scoped>
    .box_wrapper{
        margin-top: 70px;
    }
    .forget{
        width: 90%;
        margin: 25px auto;
        border-radius: 15px;
    }
    .left{
        position: absolute;
        left: -6px;
        transform: translateY(1px) !important;
        height: 22px !important;
    }
    .box_for{
        display: flex;
        width: 90%;
        margin: 0 auto;
        padding: 5px 10px;
        height: 30px;
        line-height: 30px;
        background: #EEEEEE;
        border-radius: 50px;
        margin-top: 20px;
    }
    .box_for img{
        height: 28px;
        transform: translateY(1px);
    }
    .box_for input{
        border: none;
        outline: none;
        width: 77%;
        padding-left: 5px;
        background: #EEEEEE;
    }

    .btn{
        width: 90%;
        background: linear-gradient(to right, #128ae7, #12ade7);
        text-align: center;
        border-radius: 50px;
        height: 45px;
        line-height: 45px;
        color:white;
        margin: 30px auto;
    }
</style>